Next.jsでCloudscape Design Systemを試してみた

# ディレクトリ移動
cd ~/src/

# Next.jsアプリケーション cloudscape-sample を作成
npx create-next-app@latest cloudscape-sample --use-npm --ts

# アプリケーションディレクトリへ移動
cd ./cloudscape-sample

# Reactコンポーネントをインストール
npm install @cloudscape-design/global-styles
npm install @cloudscape-design/components

# トランスパイル関連のモジュールは --save-dev インストール
npm install -D next-transpile-modules next-compose-plugins

# @cloudscape-design/componentsインストール時に警告が出る
$ npm install @cloudscape-design/components
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency
npm WARN ERESOLVE overriding peer dependency

added 37 packages, and audited 276 packages in 11s

80 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

# また、d3-color Ver.3.1.0の脆弱性が出ているがVer.3.1.0が最新バージョンのためどうすることもできない...
$ npm audit
# npm audit report

d3-color  <3.1.0
Severity: high
d3-color vulnerable to ReDoS - https://github.com/advisories/GHSA-36jr-mh4h-2g58
No fix available
node_modules/d3-color
  d3-interpolate  0.1.3 - 2.0.1
  Depends on vulnerable versions of d3-color
  node_modules/d3-interpolate
    d3-scale  0.1.5 - 3.3.0
    Depends on vulnerable versions of d3-interpolate
    node_modules/d3-scale
      @cloudscape-design/components  *
      Depends on vulnerable versions of d3-scale
      node_modules/@cloudscape-design/components

4 high severity vulnerabilities

Some issues need review, and may require choosing
a different dependency.

// TypeScriptの場合
const withTM = require('next-transpile-modules')(['@cloudscape-design/components']);

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

const buildConfig = _phase => {
  const plugins = [withTM]
  const config = plugins.reduce((acc, next) => next(acc), {
    ...nextConfig
  })
  return config
}

module.exports = buildConfig();

// JavaScriptの場合
const withTranspileModules = require('next-transpile-modules')
const withPlugins = require('next-compose-plugins')

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

// Here we will add a plugin to our configuration to transpile the CloudScape components into
module.exports = withPlugins([withTranspileModules(['@cloudscape-design/components'])], nextConfig)

import { useState } from "react";
import Header from "@cloudscape-design/components/header";
import Container from "@cloudscape-design/components/container";
import SpaceBetween from "@cloudscape-design/components/space-between";
import Input from "@cloudscape-design/components/input";
import Button from "@cloudscape-design/components/button";

export default function App() {
  const [value, setValue] = useState("");

  return (
    <SpaceBetween size="m">
      <Header variant="h1">Hello World!</Header>

      <Container>
        <SpaceBetween size="s">
          <span>Start editing to see some magic happen</span>
          <Input
            value={value}
            onChange={(event) => setValue(event.detail.value)}
          />
          <Button variant="primary">Click me</Button>
        </SpaceBetween>
      </Container>
    </SpaceBetween>
  );
}

import React from 'react'
if (typeof window === 'undefined') React.useLayoutEffect = () => {}

import type { AppProps } from 'next/app'
import React from 'react'

if (typeof window === 'undefined') React.useLayoutEffect = () => {}

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}